<template>
	<view class="content">
		<view class="mainBox">
			<view class="listBox" v-if='dataList.length'>
				<view class="list row" v-for="(item,index) in dataList" :key="index">
					<view class="num">
						<text v-if="item.preferentialContentType==1">{{item.preferentialAmount}}折</text>
						<text v-else>{{item.preferentialAmount}}元</text>
					</view>
					<view class="intro fill">
						<view class="name">{{item.couponName}}</view>
						<view class="desc">{{item.couponTypeDesc}}</view>
						<view class="time">
							{{timestamp(item.expirationStartTime,true)}}
							至
							{{timestamp(item.expirationEndTime,true)}}
						</view>
						<image class="img" style="width: 100rpx;height: 100rpx;"
							src="@/static/images/coupon/expired.png" mode="aspectFit">
						</image>
					</view>
				</view>
			</view>
			<view v-else style="margin-top: 40%;">
				<u-empty mode="coupon" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import dayjs from 'dayjs';
	import { ref,onMounted } from "vue";
	import * as API from '@/common/API/coupon'
	const dataList = ref([])
	const getList = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		const data = await API.getCoupon({ usageStatus: 4 })
		dataList.value = data
		uni.hideLoading();
	}
	onMounted(() => {
		getList()
	})
	//处理时间戳
	const timestamp = (val:any,s) => {
		return val? (!s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')) : '--'
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 16rpx;

		.tabBox {
			background: #fff;
			text-align: center;

			.tab {
				line-height: 88rpx;
				color: #666;
				font-weight: bold;

				&.active {
					color: #333;
					position: relative;

					&::after {
						content: '';
						display: inline-block;
						width: 100%;
						height: 4rpx;
						background: $uni-color-primary;
						position: absolute;
						bottom: 0;
						left: 0;
					}
				}
			}
		}

		.mainBox {
			.swiper {
				overflow-y: scroll;

				uni-swiper-item {
					overflow-y: scroll;
				}
			}

			.listBox {
				padding: 16rpx 32rpx;

				.list {
					background: #fff;
					align-items: stretch;
					margin-bottom: 16rpx;
					border-radius: 16rpx;
					overflow: hidden;
					position: relative;

					&:last-child {
						margin: 0;
					}

					.num {
						width: 200rpx;
						background: #d7d7d7;
						text-align: center;
						color: #fff;
						margin-right: 24rpx;
						font-size: 36rpx;
						font-weight: bold;
						padding-top: 68rpx;
					}

					.intro {
						padding: 22rpx 0;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							line-height: 46rpx;
						}

						.desc {
							line-height: 46rpx;
						}

						.time {
							line-height: 36rpx;
							color: #666;
						}

						.img {
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
			}
		}
	}
</style>